<script setup lang="ts">
    import { defineAsyncComponent,reactive,ref,toRefs } from 'vue';
    import base from "@/utils/base";
    import { uploadImg } from '@/api/common/media';
    import request from "@/utils/request";
    import {notify} from '@/utils/element'
    import { Session } from '@/utils/storage';
    const Editor=defineAsyncComponent(()=>import('@/components/editor/index.vue'));


                                                                                        
    const formRef=ref();
    const state=reactive({
        loadding:false,//加载框
        visible:false,//隐藏显示
        formData:{} as any,
      roisfalg:{
                                                                                              hetongbianhao: false,
                                                            hetongmingcheng: false,
                                                            hetongleixing: false,
                                                            hetongzhuangtai: false,
                                                            qianshuriqi: false,
                                                            shengxiaoriqi: false,
                                                            zhongzhiriqi: false,
                                                            jiafanglianxiren: false,
                                                            jiafanglianxifangshi: false,
                                                            jiafangdizhi: false,
                                                            yifanglianxiren: false,
                                                            yifanglianxifangshi: false,
                                                            yifangdizhi: false,
                                                            hetongjine: false,
                                                            weiyuezeren: false,
                                                            jiaofushijian: false,
                                                            hetongwenjian: false,
                                                            userid: false,
                                                            sfsh: false,
                                                            shhf: false,
                              },
                                                                                                                        hetongleixingOptions: [],
                                                    hetongzhuangtaiOptions: [],
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            title:'新增',
        type:'add'
    })
    const initData={

    }
    const {
        loadding,
        visible,
        formData,
        title,
        type,
      roisfalg
                                                                                                                    , hetongleixingOptions
                                                , hetongzhuangtaiOptions
                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    } = {...toRefs(state)};


    function open(title:string,type:string,formData?:any){

        state.title=title;
        state.type=type;
        state.formData={...formData,...initData};
        state.visible=true;


      if (state.type == 'cross') {
        var obj = Session.get('crossObj');
        for (var o in obj) {
                                                                                                      if (o == 'hetongbianhao') {
                    state.formData.hetongbianhao = obj[o];
                    state.roisfalg.hetongbianhao = true;
                    continue;
                  }
                                                              if (o == 'hetongmingcheng') {
                    state.formData.hetongmingcheng = obj[o];
                    state.roisfalg.hetongmingcheng = true;
                    continue;
                  }
                                                              if (o == 'hetongleixing') {
                    state.formData.hetongleixing = obj[o];
                    state.roisfalg.hetongleixing = true;
                    continue;
                  }
                                                              if (o == 'hetongzhuangtai') {
                    state.formData.hetongzhuangtai = obj[o];
                    state.roisfalg.hetongzhuangtai = true;
                    continue;
                  }
                                                              if (o == 'qianshuriqi') {
                    state.formData.qianshuriqi = obj[o];
                    state.roisfalg.qianshuriqi = true;
                    continue;
                  }
                                                              if (o == 'shengxiaoriqi') {
                    state.formData.shengxiaoriqi = obj[o];
                    state.roisfalg.shengxiaoriqi = true;
                    continue;
                  }
                                                              if (o == 'zhongzhiriqi') {
                    state.formData.zhongzhiriqi = obj[o];
                    state.roisfalg.zhongzhiriqi = true;
                    continue;
                  }
                                                              if (o == 'jiafanglianxiren') {
                    state.formData.jiafanglianxiren = obj[o];
                    state.roisfalg.jiafanglianxiren = true;
                    continue;
                  }
                                                              if (o == 'jiafanglianxifangshi') {
                    state.formData.jiafanglianxifangshi = obj[o];
                    state.roisfalg.jiafanglianxifangshi = true;
                    continue;
                  }
                                                              if (o == 'jiafangdizhi') {
                    state.formData.jiafangdizhi = obj[o];
                    state.roisfalg.jiafangdizhi = true;
                    continue;
                  }
                                                              if (o == 'yifanglianxiren') {
                    state.formData.yifanglianxiren = obj[o];
                    state.roisfalg.yifanglianxiren = true;
                    continue;
                  }
                                                              if (o == 'yifanglianxifangshi') {
                    state.formData.yifanglianxifangshi = obj[o];
                    state.roisfalg.yifanglianxifangshi = true;
                    continue;
                  }
                                                              if (o == 'yifangdizhi') {
                    state.formData.yifangdizhi = obj[o];
                    state.roisfalg.yifangdizhi = true;
                    continue;
                  }
                                                              if (o == 'hetongjine') {
                    state.formData.hetongjine = obj[o];
                    state.roisfalg.hetongjine = true;
                    continue;
                  }
                                                              if (o == 'weiyuezeren') {
                    state.formData.weiyuezeren = obj[o];
                    state.roisfalg.weiyuezeren = true;
                    continue;
                  }
                                                              if (o == 'jiaofushijian') {
                    state.formData.jiaofushijian = obj[o];
                    state.roisfalg.jiaofushijian = true;
                    continue;
                  }
                                                              if (o == 'hetongwenjian') {
                    state.formData.hetongwenjian = obj[o];
                    state.roisfalg.hetongwenjian = true;
                    continue;
                  }
                                                              if (o == 'userid') {
                    state.formData.userid = obj[o];
                    state.roisfalg.userid = true;
                    continue;
                  }
                                                              if (o == 'sfsh') {
                    state.formData.sfsh = obj[o];
                    state.roisfalg.sfsh = true;
                    continue;
                  }
                                                              if (o == 'shhf') {
                    state.formData.shhf = obj[o];
                    state.roisfalg.shhf = true;
                    continue;
                  }
                                    }


      }
    }


    const emit = defineEmits(['refresh']);

    const close=()=>{
        state.visible=false;
    }

    function submitForm(){
        formRef.value?.validate((valid:boolean)=>{

            if(!valid) return;
            state.loadding=true;
          if (state.type == 'cross') {
            request({
              url:`hetongguanli/save`,
              method:'post',
              data:state.formData
            }).then(({data})=>{
              notify("操作成功",{type:'success'});
              state.loadding=false;
              close();
              emit("refresh");
            })
          }else{
            request({
              url:`hetongguanli/${!state.formData.id ? "save" : "update"}`,
              method:'post',
              data:state.formData
            }).then(({data})=>{
              notify("操作成功",{type:'success'});
              state.loadding=false;
              close();
              emit("refresh");
            })
          }




        })

    }

    defineExpose({
        open
    })


                    


                    


                    


                    


                                                                                                state.hetongleixingOptions='销售合同!采购合同!租赁合同!服务合同!劳动合同'.split('!')
                                    



    


                                                                                                state.hetongzhuangtaiOptions='草稿!已签署!执行中!已完成!以中止'.split('!')
                                    



    


                    


                    


                    


                    


                    


                    


                    


                    


                    


                    


                    


                    


                                async function handleUploadhetongwenjian(options: any){
                // console.log('handleUploadImg', options);
                try {
                    loadding.value = true;
                    const form = new FormData();
                    form.append('file', options.file);
                    form.append('data', JSON.stringify({sourceType: 'goods_img'}));
                    // 开始上传
                    const data = await uploadImg(form);

                    // 上传成功 , 将上传成功的图片地址赋值回显出来
                    const name=base.get().url;
                    formData.value.hetongwenjian = name+'upload/'+ data.file;
                } catch(e) {

                } finally {
                    loadding.value = false;
                }
            }
            


                    


                    


                    


        


</script>

<template>
    <el-dialog :title="`${title}`" v-model="visible"
               center draggable :before-close="close" width="1000px"
               :close-on-click-modal="false" destroy-on-close>
        <div v-loading="loadding">
            <el-form ref="formRef" :model="formData"
                     label-width="85px" label-right="right"
                     label-suffix=":" status-icon
            >
                                                                                                            
                        <el-form-item label="合同编号" prop="hetongbianhao" :rules="{required: true, message: '合同编号为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.hetongbianhao" maxlength="30" clearable show-word-limit placeholder="请输入合同编号" :readonly="roisfalg.hetongbianhao"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="合同名称" prop="hetongmingcheng" :rules="{required: true, message: '合同名称为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.hetongmingcheng" maxlength="30" clearable show-word-limit placeholder="请输入合同名称" :readonly="roisfalg.hetongmingcheng"/>
                        </el-form-item>
                                                                                                                        

                                                                                <el-form-item label="合同类型" prop="hetongleixing" :rules="{required: true, message: '合同类型为必选项！', trigger: 'blur'}">
                            <el-select
                                    v-model="formData.hetongleixing"
                                    clearable
                                    placeholder="请选择合同类型"
                                    style="width: 240px"
                            >
                                <el-option
                                        v-for="(item,index) in hetongleixingOptions"
                                        v-bind:key="index"
                                        :label="item"
                                        :value="item"
                                />
                            </el-select>
                        </el-form-item>

                                                                                <el-form-item label="合同状态" prop="hetongzhuangtai" :rules="{required: true, message: '合同状态为必选项！', trigger: 'blur'}">
                            <el-select
                                    v-model="formData.hetongzhuangtai"
                                    clearable
                                    placeholder="请选择合同状态"
                                    style="width: 240px"
                            >
                                <el-option
                                        v-for="(item,index) in hetongzhuangtaiOptions"
                                        v-bind:key="index"
                                        :label="item"
                                        :value="item"
                                />
                            </el-select>
                        </el-form-item>

                                                                                <el-form-item label="签署日期" prop="qianshuriqi"  :rules="{required: true, message: '签署日期为必填项', trigger: 'blur'}">

                            <el-date-picker
                                    v-model="formData.qianshuriqi"
                                    type="date"
                                    format="YYYY/MM/DD"
                                    value-format="YYYY-MM-DD"
                                    placeholder="签署日期"
                            />


                        </el-form-item>
                                                                                <el-form-item label="生效日期" prop="shengxiaoriqi"  :rules="{required: true, message: '生效日期为必填项', trigger: 'blur'}">

                            <el-date-picker
                                    v-model="formData.shengxiaoriqi"
                                    type="date"
                                    format="YYYY/MM/DD"
                                    value-format="YYYY-MM-DD"
                                    placeholder="生效日期"
                            />


                        </el-form-item>
                                                                                <el-form-item label="终止日期" prop="zhongzhiriqi"  :rules="{required: true, message: '终止日期为必填项', trigger: 'blur'}">

                            <el-date-picker
                                    v-model="formData.zhongzhiriqi"
                                    type="date"
                                    format="YYYY/MM/DD"
                                    value-format="YYYY-MM-DD"
                                    placeholder="终止日期"
                            />


                        </el-form-item>
                                                        
                        <el-form-item label="甲方联系人" prop="jiafanglianxiren" :rules="{required: true, message: '甲方联系人为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.jiafanglianxiren" maxlength="30" clearable show-word-limit placeholder="请输入甲方联系人" :readonly="roisfalg.jiafanglianxiren"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="甲方联系方式" prop="jiafanglianxifangshi" :rules="{required: true, message: '甲方联系方式为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.jiafanglianxifangshi" maxlength="30" clearable show-word-limit placeholder="请输入甲方联系方式" :readonly="roisfalg.jiafanglianxifangshi"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="甲方地址" prop="jiafangdizhi" :rules="{required: true, message: '甲方地址为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.jiafangdizhi" maxlength="30" clearable show-word-limit placeholder="请输入甲方地址" :readonly="roisfalg.jiafangdizhi"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="乙方联系人" prop="yifanglianxiren" :rules="{required: true, message: '乙方联系人为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.yifanglianxiren" maxlength="30" clearable show-word-limit placeholder="请输入乙方联系人" :readonly="roisfalg.yifanglianxiren"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="乙方联系方式" prop="yifanglianxifangshi" :rules="{required: true, message: '乙方联系方式为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.yifanglianxifangshi" maxlength="30" clearable show-word-limit placeholder="请输入乙方联系方式" :readonly="roisfalg.yifanglianxifangshi"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="乙方地址" prop="yifangdizhi" :rules="{required: true, message: '乙方地址为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.yifangdizhi" maxlength="30" clearable show-word-limit placeholder="请输入乙方地址" :readonly="roisfalg.yifangdizhi"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="合同金额" prop="hetongjine" :rules="{required: true, message: '合同金额为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.hetongjine" maxlength="30" clearable show-word-limit placeholder="请输入合同金额" :readonly="roisfalg.hetongjine"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="违约责任" prop="weiyuezeren" :rules="{required: true, message: '违约责任为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.weiyuezeren" maxlength="30" clearable show-word-limit placeholder="请输入违约责任" :readonly="roisfalg.weiyuezeren"/>
                        </el-form-item>
                                                                                                                        

                                                                                <el-form-item label="交付时间" prop="jiaofushijian"  :rules="{required: true, message: '交付时间为必填项', trigger: 'blur'}">

                            <el-date-picker
                                    v-model="formData.jiaofushijian"
                                    type="datetime"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="交付时间"
                            />


                        </el-form-item>
                                                        
                        <el-form-item label="合同文件" prop="hetongwenjian" :rules="{required: true, message: '为必填项', trigger: 'blur'}">

                            <el-upload
                                    class="avatar-uploader"
                                    action="#"
                                    :show-file-list="false"
                                    :http-request="handleUploadhetongwenjian"
                            >
                                <el-input v-model="formData.hetongwenjian" v-if="formData.hetongwenjian" clearable show-word-limit placeholder="请上传合同文件" />
                                <el-icon v-else class="avatar-uploader-icon"><ele-Plus /></el-icon>

                            </el-upload>
                        </el-form-item>

                                                                                                                                                

                
            </el-form>
            <el-row justify="center" class="mt10">
                <el-button @click="close">取 消</el-button>
                <el-button @click="submitForm" type="primary">保 存</el-button>
            </el-row>
        </div>
    </el-dialog>























</template>

<style lang="scss" scoped>


                                                                                        
    .avatar-uploader{
        border:1px solid #e4e6e9
    }

    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>
